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ليس الانترنت فقط لمجرد التصفح , بل أن هناك الكثيرين من يحتاج لبناء موقعه الخاص 
ليطلع عليها الآخرين . 
قديما كانوا يستخدمون لغة | 11۷ ويتعلموها لتصميم موقعهم او صفحاتهم . 
لكن ظهور برنامج الفرونت بيج سهل كثيرا من الامور , بحيث ما ان تضع أي كائن الى 
صفحتك باستخدام البرنامج الى ان تكتب بالكود في (التعليمات البرمجية) 


ما ھی رتام افر وات ب ۲ 


برنامج الفرونت بيج ضمن حزمة الاوفيس , برنامج يستخدم لتصميم مواقع الانترنت . 


@ مراحل إنشاء الموقع : 


تصميم صفحة أو موقع ويب : 
ما هو الا تصميم الشكل الذي تظهر عليه الصفحة للزائر , محتوية على النصوص و 
الصور و الفلاشات و الجداول و الارتباطات و غيرها. 


النشر على الويب : 
ويقصد بها , المرحلة التالية بعد الانتهاء من تصميم الموقع بما يحتويه من ملفات و 
صفحات . 

أي اتاحة الوصول للموقع من قبل الزائر للانترنت .. و تتم عن طريق نقل الملفات من 
الجهاز الى جهاز آخر هو المضيف (وحدة خدمة الانترنت ) 

وهناك برامج عديدة تستخدم في النقل و تسمی ۴۳۴ کبرنامج ۴×۴ ۴1۸5۳ 


قبل البدء بإنشاء الموقع يجب وضع عنوان الموقع و تحديد الأهداف من بناء موقعك حتى لا 
يحدث أي تشويش و تتضح الأفكار و تصبح قادر على إنشائه بسهولة و يسر . 


A 2 BB 2 


فقخ البزنامج 


يتم فتح البرنامج عن طريق قائمة بدأ MICROSOFT OFFICE ja .. (57۸ART)‏ 
2003 .. تر FRONT PAGE‏ . 
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صجول الصحقيات 
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البراقح 


نحتار ملف >> جدید 

من لوحة المهام نختار موقع ويب ذو صفحة واحدة 

اختر موقع ويب ذو صفحة واحد او موقع ويب فارغ او احد القوالب .. 
ونغير مكان حفظ الملف .. بانشاء مجلد و وضع كل العمل فيه 
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لتغير لون خلفية الصفحة او وضع صورة في الخلفية 
1. نضغط كليك باليمين و نختار خصائص الصفحة . 


2. ومن قائمة تنسيق .. نغير لون الخلفية .. او نضع صورة من استعراض 


الغلفية؛ | تلقائي ”| الارتباط التشعبي: تلقائي ا 


النص: تلقاڈي ا ارتباط تشعبي تمت زبارته؛ | تلقاثي 


الارتباط التشجبي النشط'؟ | تلقاثي. 


ضف سر 


1. من قائمة ادراج . 
2. اختر صورة >> من ملف , و نختار الصورة التي نريد ... 
3. تحفظ الصور في مجلد |٣29٥‏ 
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الارتباطات التشعبية و الإشارة المرجعية : 
لعمل إشارة مرجعية للتنقل بين أجزاء الصفحة .(اتبع الخطو 
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اسم الأشارة المرججية؛ 


شذة الصفحة: 


نحدد النص الذي نريد الضغط عليه للانتقال لاعلى الصفحة و نضغط كليك بالمين و اختر 


اتباط تشعبي 


ایس با سوج تاي الست 


اليتس المظلوب عرضها إالتقاب لهل السفحة 
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لعمل ارتباط تشعبي على الصورة او النص 
أي نضغط على الصورة .. بذ 
1. ادرج صورة 
2. حدد الصورة 
3. اضغط باليمين بالماوس 
4. واختر ارتباط تشعبي 
5. اختر الصفحة التي تريد ان تذهب اليها . او من الممكن اضافة ايميل من (عنوان 
البريد الالكتروني 
ذلك التصن ر„ تكدةه و تشيف له اور تباط 
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0 اضافة تلميح للارتباط التشعبي : 
1 اضغط كليك باليمين بالماوس , واختر 


التشعبي . 
3 و من تلميح الشاشة .. اكتب النص التوضيحي لعمل الرابط . 


الارتباط التشعبي او خصائص الارتباط 
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@ الاطارات : 


1. نقوم بإنشاء موقع ویب جديد .. ولیكن موقع ويب (فارغ) 
2. من قائمة جزء المهام اختر قوالب صفحة أخرى 
3. انظر الى الصورة التالية 
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راس وتخییل 
ومجحتيات 


تذرج من على ندرج شنداخل انقسام رآ 
لاسفل 
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رس صفجة حواشي 


ت 


أوراق انساط | صفحات إطارات عام 


RE 


سي انقسام فقي خيارات 
[ إضافة مهمة صب ققط 


1[ فخ في الاطار الخال 


القصف 


إنشاء إطار شجار أعلى الصفحة ذه 
محتهات وإطار رئيسي. تغير الذأرتباطات 
التشعبية الموجودة في الشعار إطار 


ا افق ی اغا امہ 


الفرق هنا بين صفحة جديدة و تعين صفحة اولية 
الصفحة الجديدة / انشاء صفحة جديدة 
اما تعين صفحة اولية / أي جلب صفحة موجودة مسبقا . 


4, احفظ العمل .. كل صفحة باسم . 

5. مثلا .. ) Banner‏ و menu‏ و Nlain‏ _ وجمیع الصفحات موجوة داخل 
صفحة ال ×ملہİ‏ . 

6. في صفحة البانر ( الشعار ) نضع عنوان لموقعنا [. 

7. في ال اه" أي القائمة نضع الأزرار التي ستظهر داخل ال "أه".. 

8. بعد ان قمت بالعمل السابق الان سنقوم باضافة رابط في صفحة القائمة .. 

9. ثم نحدد مكان فتح الصفحة وليكن في الہ اة" 

0. اختر الاطار الهدف وحدد المكان ... انظر الى الصورة التالية 
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اضافة زر تبادلي 
1. اضف زر تبادلي في القائمة 
اذهب الى ادارج 
اختر زر تبادلي 
فتظهر لك قائمة من الازرار اختر أي زر تريد . 
انظر الى الصورة التالية 


ıge_1.htm* 


أزداد تبادلية 


مجاينة؛ حرك المؤشز فوق الزر وانقر لمشاشدة نموذج. 


اتصال بنا 


| افق ) | يته اتام | 


اليص المطلوب عرصه! | اتصل بنا 
عنوان البريد الالختري؛ 
mailto: 1zZ32323@hotmail,com‏ 
الموضوع: 
السلام عليكةر 
عنان البريذ الإلكترفي المستخدمة مقخرا: 


ا الزن 


2. غير اسم الزر من نص 
3. اختر الارتباط للزر و ليكن الايميل 


إلى اللقاء في الدرس القادم 
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اضافة ملف فلاش أو فيديو 


.. اذهب الى قائمة ادراج‎ ٥ 


web component jûl O 


Yeh Component Ij] 


نوع الصكون: اختبار عنصر نكم 
HTML‏ 
تطببقات 133 الصخيرة 


™سسسے 


عنصر تحکم عاق 
N‏ الد بوت ال تبت 
فلم بننسیق 5۲ا۴ 


عذاذ الذخول 

تصجرض الصور الفوتوغرافية 
تصتصين التجتنوق 

أشرطة الذرتباط 

جنول الصحتيات 

قاثمة المراتب الجحشرة الأولى 
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REPS ¢ 


متينات إضافية 


تا ضز ن 
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لذراح أذاة إضافية. 


... ) اختر ( عناصر تحكم متقدمة‎ ٥ 
ثم توصیل‎ ٥ 
تظهر لك نافذة اختر منها .. استعرض .. و اختر ملف الفلاش اى الفيديو و حدد‎ ٥ 
اعا‎ 
. اضافة صوت في الخلفية للصفحة‎ 
. ه اضغط كليك باليمين بالماوس و اختر خصائص الصفحة‎ 


ه اختر صوت في الخلفية و استعراض واختر الملف الذي تريد 


الجداول : 
ه لادراج جدول .. من قائمة جدول 
٥ه‏ اختر ادراج 


٥ه‏ جدول 


ه حدد الصفوف و الأعمدة .. للجدول 


إذراج :دوك 


نطاف الخلية: 
الصساقة بين الخلاا: 


اتجاد الجذول: 


الحذوذ 


| ]| طي حدود الجدول 


الخلفية 


E 


[ | استخدام صورة خلفية 
استجراض... 
آذوات التخطيط 
اتمكين أدوات التخطيط لاا تجطبل أدوات الخطيط 


ها تمتين أذوات التخطيط استنادا [لى محتوف الحدول تلقاثا 


[ ا تجيين كافتراضي للجداول الجنيدة 


نمط. | موافف | الخاد الامر 


اجعل نطاق الخلية , المسافة بين الخلايا , الحجم جميعها = صفر . 


لتغير لون خلفية الخلايا في الجدول .. 
ه اضغط كليك باليمين بالماوس على الجدول واختر خصائص الجدول 
ه في الخلفية / استخدم اللون او الصورة التي تريد . 
أّما اذا اردت تغير لون الحدود ... فغير (اللون الفاتح و الداكن ) 
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Web Component Iji] 
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جداول البيانات والتخطيطات 
عغذاذ الذخول 

تمعرض الصور الفيتوغرافية 
تصصين الصحتوت 

أشرطة الذرتباط 

جذول المحتويات 

قائصة المراتب العحشرة الأولى 
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ججل تمرير النص يتم بشتل عصوذت عبر الشاشة. 


اكتب النص الذي تريد .. وحدد نوع الحركة 


اما اذا اردت تغيير لون النص او حجمه .. فاختر نمط >> خط و غير ما يلزم 


خضاتض الشات الذسصية 


| الحرض: 
الارتغاع: 


موافق 


معرض الصور . 
ه من قائمة ادراج 
web component jûl o‏ 


O‏ و اختر معرض الصور كما في الشكل التالي 

× اا Web Component zlı)‏ 
نوخ الصسكون: تحديد خيار مجحرض الصور الفونوغرافية 

تأئيرات حبهية 

البحث على ويب 


LEE 
جذاول البيانات والنخطيطات‎ 


أشرطة الارتباط 
جذول الصجتوات 
قائمة المراتب العحشرة الأولى 
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ترتبب الصور الفوتوغرافية قي عرض شراٹح بوضے الأشكال المصخرة للصور عبر علي الصفحة وصورة تبيرة قي 
اسفلها 0 انشا الأشكال الصمصخرة للصور تلقاثياً. وتم نرتي شذه الأشكال المصجرة للصور فصن صغا ينم 
نصریرهد عبر اعلی الصفجة. وتجرض الصورة المجحددة بحججها التامل قي الوسط. 


صور من ماسح ضيشي اد تامیرات... 


لديك 0 صورة في شذا المجرض 
® استخدام تنسيفق الخط من صفحة 


© الاستبذال داستخذام تنسيق خط ضفخصص 


اضافة سمة .. 
ه اذهب الى قائمة تنسيق 
٥ه‏ اختر منها سمة 
ه ثم اختر الشكل الذي تريد 


لاضافة شريط الارتباط 


web component Jil اذهب‎ 

اختر شريط لارتباط 

ثم نوعه افقي او ر اسي 

و اختر الصفحات التي تريد ان تظهر لديك 


خحصاتضص ربط الذرتباطات 


اتیار ارتباط صوجود: 
تتنزبظ ارتناطات جختبذ 


موافق 


لخد شمر | 


التعامل مع الصور و تقسيمها 
ت اتف سور 
ه الان اظهر شريط الصور من عرض >> اشرطة ادوات >> صور 


× ¥ ور 
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ه اختر احد الاشكال ( الدائرة او المربع ... الخ) ... و اسحب على الصورة 
٥‏ لتقوم بتقسیمها 

ه عند انشاء متلا مربع .. يظهر لك نافذة الارتباط التشعبي 

ه اختر اللينك او الصفحة التي تود الذهاب اليها من خلال الجزء من الصورة . 


نوافذ التنبيه 


ضع هذا الكود في التعليمات البرمجية 
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لتغير شكل الماوس ... 
ضع الكود التالي في صفحتك في التعليمات البرمجية 
<style>‏ 


Body 


{ 
CURSOR: url(''mouse.ani'"); 


} 


<style/> 
مع مراعاة ان يكون شكل الماوس الذي تريد بامتداد ارج‎ 
و يكون في مجلد الموقع‎ 
او تغير المسار 1ره.٤ئuم" حسب مكان صورة شكل الماوس‎ 


